<template>
  <div class="index">
    <img class="bgIndex" src="../assets/index.png" alt />
    <img v-if="manRoleImg!=null" class="processImg" :src="manRoleImg" alt />
    <div class="clock" v-show="clock != 0">
      {{ clock }}
      <img
        src="../assets/clock.png"
        style="position: absolute;left: 0;top: 0;height: 50px;width: 50px;"
      />
    </div>
    <div class="centerContent">
      <Alert v-if="seat == -1">点击座位坐下</Alert>
      <Alert
        v-if="seat != -1"
        style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;"
      >你是：{{ seat }}号-{{ user }}</Alert>
      <Button
        style="position: absolute; left: 20px;z-index:99;"
        @click="stand"
        v-if="seat != -1&&!running"
      >站起</Button>
      <div
        style="position: absolute; left: 0;width:100%;text-align:center; height: 32px; line-height: 32px"
      >房间号：{{ hostId }}</div>
      <Button style="position: absolute; right: 20px;z-index:99;" @click="back">退出房间</Button>
      <div class="seat">
        <div
          v-for="(item, index) in players"
          :key="index"
          class="seat-item"
          @click="choose(item, index)"
        >
          <img src="../assets/seat.png" alt v-show="item == null" />
          <!-- <img :src="iconList[iconIndexList[nameIndexList.indexOf(item)] - 1]" alt v-show="item != null&&nameIndexList.indexOf(item)>-1&&item == nameIndexList[nameIndexList.indexOf(item)]" /> -->

          <img
            src="../assets/save.png"
            style="position: absolute;top: 0;left: 0;z-index: 999;"
            v-show="self == 2 && !nightEnd && saveAndPoisonState[0] == 1&&diedMan == choiseUser&&choiseUser == index + 1&&processStap == 2"
            alt
          />
          <img
            src="../assets/poison.png"
            style="position: absolute;top: 0;left: 0;z-index: 999;"
            v-show="self == 2 && !nightEnd && saveAndPoisonState[1] == 1&&diedMan != choiseUser&&choiseUser == index + 1&&processStap == 2"
            alt
          />
          <img
            src="../assets/check.png"
            style="position: absolute;top: 0;left: 0;z-index: 999;"
            v-show="self == 1&&processStap == 4&&choiseUser == index + 1"
            alt
          />
          <span
            style="font-size: 36px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;"
            v-show="item != null"
            :style="{'color':diedMen.indexOf(index + 1) > -1?'gray':'black'}"
          >{{ index + 1 }}号</span>
          <span
            style="line-height: 20px;position: absolute;left: 0;bottom: 0;height: 20px;width: 100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
            v-show="item != null"
          >{{ item }}</span>
          <div class="killMsg">
            <div
              v-for="(el, m) in killMap"
              :key="m"
              v-show="el[1] == index + 1&&processStap==0&&(self == 21 || self == 22 || self == 30)"
            >{{ el[0] }}</div>
          </div>
          <div
            class="seat-item-die"
            v-show="diedMan == index + 1&&((processStap == 2&&self == 2)||(processStap == 1&&(self == 21 || self == 22 || self == 30)))"
          >
            <img src="../assets/killMark.png" />
          </div>
          <div
            class="seat-item-die"
            style="color: gray"
            v-show="diedMen.indexOf(index + 1) > -1"
          >已死亡</div>
        </div>
      </div>
      <div class="skills">
        <!-- 验人 -->
        <Button
          style
          @click="check"
          class="bottomBtn"
          v-show="self == 1&&processStap == 4&&choiseUser != ''&&!checkConfirm"
        >确定</Button>
        <!-- 杀人 -->
        <Button
          style
          @click="kill"
          class="bottomBtn"
          v-show="(self == 21 || self == 22 || self == 30) && !nightEnd&&processStap == 0&&choiseUser != ''&&!wolfConfirm"
        >确定</Button>
        <!-- 救人 -->
        <Button
          @click="save"
          class="bottomBtn"
          v-show="self == 2 && !nightEnd && saveAndPoisonState[0] == 1&&saveAndPoisonState[2] == 1&&processStap == 2&&choiseUser != ''&&diedMan == choiseUser&&!witchConfirm"
        >确定</Button>
        <!-- 毒人 -->
        <Button
          @click="poison"
          class="bottomBtn"
          v-show="self == 2 && !nightEnd && saveAndPoisonState[1] == 1&&saveAndPoisonState[2] == 1&&processStap == 2&&choiseUser != ''&&diedMan != choiseUser&&!witchConfirm"
        >确定</Button>
        <!-- 守护 -->
        <!-- <Button style @click="guard" v-show="self == 5 && !nightEnd">确定</Button> -->
        <!-- <Button style @click="gun" v-show="self == 3 && nightEnd">开枪</Button> -->
        <!-- <Button style @click="unSkill" v-show="choiseUser != ''">取消</Button> -->
      </div>
      <Button class="lastNight" @click="viewMsg(0)" v-show="nightEnd && creator">昨夜信息</Button>
      <Button
        class="lastNight"
        @click="viewMsg(1)"
        v-show="nightEnd && !creator && nightMsg != ''"
      >昨夜信息</Button>
      <Button
        class="begin bottomBtn"
        @click="getCard"
        v-show="!running && creator&&nullSeat == 0&&self==0"
      >发牌</Button>
      <Button
        class="begin bottomBtn"
        @click="begin"
        v-show="!running && creator&&nullSeat == 0&&self!=0"
      >开始</Button>
      <div class="skill" @click="useSkill" v-show="self!=0">
        <img src="../assets/skill.png" style="height: 50px; width: 50px" />
      </div>
      <div class="self" @click="selfShow" v-show="self != 0">
        <img src="../assets/self.png" style="height: 50px; width: 50px" />
      </div>
      <Modal v-model="view" @on-ok="ok" @on-cancel="cancel">
        <p>{{ msg }}</p>
      </Modal>
      <audio style="display: none" id="night" controls="controls" autoplay="autoplay" loop>
        <source :src="nightMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="nightClose" controls="controls" autoplay="autoplay">
        <source :src="nightCloseMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="wolfsAction" controls="controls" autoplay="autoplay">
        <source :src="wolfsActionMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="wolfsEnd" controls="controls" autoplay="autoplay">
        <source :src="wolfsEndMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="witchAction" controls="controls" autoplay="autoplay">
        <source :src="witchActionMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="witchEnd" controls="controls" autoplay="autoplay">
        <source :src="witchEndMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="checkAction" controls="controls" autoplay="autoplay">
        <source :src="checkActionMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="checkEnd" controls="controls" autoplay="autoplay">
        <source :src="checkEndMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="guardAction" controls="controls" autoplay="autoplay">
        <source :src="guardActionMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="guardEnd" controls="controls" autoplay="autoplay">
        <source :src="guardEndMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="chosePolice" controls="controls" autoplay="autoplay">
        <source :src="chosePoliceMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="giveupPolice" controls="controls" autoplay="autoplay">
        <source :src="giveupPoliceMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="countdown" controls="controls" autoplay="autoplay">
        <source :src="countdownMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="gunWaitting" controls="controls" autoplay="autoplay">
        <source :src="gunWaittingMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
      <audio style="display: none" id="nightEnd" controls="controls" autoplay="autoplay">
        <source :src="nightEndMusicUrl" type="audio/mpeg" />Your browser does not support the audio element.
      </audio>
    </div>
  </div>
</template>
<script>
import nightMp3 from "../assets/music/night.mp3";
import nightCloseMp3 from "../assets/music/nightClose.mp3";
import wolfsActionMp3 from "../assets/music/wolfsAction.mp3";
import wolfsEndMp3 from "../assets/music/wolfsEnd.mp3";
import witchActionMp3 from "../assets/music/witchAction.mp3";
import witchEndMp3 from "../assets/music/witchEnd.mp3";
import checkActionMp3 from "../assets/music/checkAction.mp3";
import checkEndMp3 from "../assets/music/checkEnd.mp3";
import guardActionMp3 from "../assets/music/guardAction.mp3";
import guardEndMp3 from "../assets/music/guardEnd.mp3";
import chosePoliceMp3 from "../assets/music/chosePolice.mp3";
import giveupPoliceMp3 from "../assets/music/giveupPolice.mp3";
import countdownMp3 from "../assets/music/sec_5_countdown.mp3";
import votMp3 from "../assets/music/vot.mp3";
import votingMp3 from "../assets/music/voting.mp3";
import gunWaittingMp3 from "../assets/music/gunWaitting.mp3";
import nightEndMp3 from "../assets/music/nightEnd.mp3";
let wolfMan = require(`../assets/processImg/wolfMan.png`);
let checkMan = require(`../assets/processImg/checkMan.png`);
let guardMan = require(`../assets/processImg/guardMan.png`);
let witchMan = require(`../assets/processImg/witchMan.png`);
let lightMan = require(`../assets/processImg/lightMan.png`);
let nightMan = require(`../assets/processImg/nightMan.png`);
let policeMan = require(`../assets/processImg/policeMan.png`);
export default {
  data() {
    return {
      path: "ws://47.97.37.176:6379/ws",
      // path: "ws://192.168.31.164:6379/ws",
      hostId: null,
      socket: null,
      timeout: 10 * 1000, //10秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      players: [],
      saveParam: null,
      poisonParam: null,
      guardParam: null,
      seats: [],
      choiseUser: "",
      view: false,
      msg: "昨夜**死了",
      running: false,
      seat: -1,
      user: "",
      self: 0,
      clock: 0,
      creator: false,
      killMap: [],
      processStap: -2, //0kill,1waiting,2save,3waiting,4check,5waiting,6end
      saveAndPoisonState: [0, 0, 0], //[解药，毒药,回合内操作与否]
      diedMan: null,
      nightEnd: false,
      diedMen: [],
      nightMsg: "",
      iconIndexList: [],
      nameIndexList: [],
      iconList: [],
      nullSeat: -1,
      //hunter is poison?
      diedBywitch: -1,

      //time
      wolfsTime: 20,
      witchTime: 15,
      checkTime: 15,

      //confirm
      wolfConfirm: false,
      witchConfirm: false,
      checkConfirm: false,

      //music
      nightMusicUrl: nightMp3,
      nightCloseMusicUrl: nightCloseMp3,
      wolfsActionMusicUrl: wolfsActionMp3,
      wolfsEndMusicUrl: wolfsEndMp3,
      witchActionMusicUrl: witchActionMp3,
      witchEndMusicUrl: witchEndMp3,
      checkActionMusicUrl: checkActionMp3,
      checkEndMusicUrl: checkEndMp3,
      guardActionMusicUrl: guardActionMp3,
      guardEndMusicUrl: guardEndMp3,
      chosePoliceMusicUrl: chosePoliceMp3,
      giveupPoliceMusicUrl: giveupPoliceMp3,
      countdownMusicUrl: countdownMp3,
      gunWaittingMusicUrl: gunWaittingMp3,
      nightEndMusicUrl: nightEndMp3,

      nightMusic: null,
      nightCloseMusic: null,
      wolfsActionMusic: null,
      wolfsEndMusic: null,
      witchActionMusic: null,
      witchEndMusic: null,
      checkActionMusic: null,
      checkEndMusic: null,
      guardActionMusic: null,
      guardEndMusic: null,
      chosePoliceMusic: null,
      giveupPoliceMusic: null,
      countdownMusic: null,
      gunWaittingMusic: null,
      nightEndMusic: null,

      //img
      manRoleImg: null
    };
  },
  mounted() {
    for (let i = 1; i < 25; i++) {
      this.iconList.push(require(`../assets/player/player${i}.png`));
    }
    if (localStorage.hostId) this.hostId = localStorage.hostId;
    if (this.timeoutObj) clearInterval(this.timeoutObj);
    if (this.serverTimeoutObj) clearTimeout(this.serverTimeoutObj);
    this.user = localStorage.name;
    if (localStorage.creator && localStorage.creator == "true") {
      this.creator = true;
    }
    if (localStorage.hostSetting) {
      //role-save-saveAndGuard-medicine
      let hostSetting = JSON.parse(localStorage.hostSetting);
      let len = hostSetting.role.length;
      for (let i = 0; i < len; i++) {
        this.players.push(null);
      }
      this.saveParam = hostSetting.save;
      this.guardParam = hostSetting.saveAndGuard;
      this.poisonParam = hostSetting.medicine;

      this.wolfsTime = parseInt(hostSetting.wolfsTime);
      this.witchTime = parseInt(hostSetting.witchTime);
      this.checkTime = parseInt(hostSetting.checkTime);
    }
    this.nightMusic = document.getElementById("night"); //获取ID
    this.nightMusic.volume = 0.1;
    this.nightMusic.pause();
    this.nightCloseMusic = document.getElementById("nightClose"); //获取ID
    this.nightCloseMusic.pause();
    this.wolfsActionMusic = document.getElementById("wolfsAction"); //获取ID
    this.wolfsActionMusic.pause();
    this.wolfsEndMusic = document.getElementById("wolfsEnd"); //获取ID
    this.wolfsEndMusic.pause();
    this.witchActionMusic = document.getElementById("witchAction"); //获取ID
    this.witchActionMusic.pause();
    this.witchEndMusic = document.getElementById("witchEnd"); //获取ID
    this.witchEndMusic.pause();
    this.checkActionMusic = document.getElementById("checkAction"); //获取ID
    this.checkActionMusic.pause();
    this.checkEndMusic = document.getElementById("checkEnd"); //获取ID
    this.checkEndMusic.pause();
    this.guardActionMusic = document.getElementById("guardAction"); //获取ID
    this.guardActionMusic.pause();
    this.guardEndMusic = document.getElementById("guardEnd"); //获取ID
    this.guardEndMusic.pause();
    this.chosePoliceMusic = document.getElementById("chosePolice"); //获取ID
    this.chosePoliceMusic.pause();
    this.giveupPoliceMusic = document.getElementById("giveupPolice"); //获取ID
    this.giveupPoliceMusic.pause();
    this.countdownMusic = document.getElementById("countdown"); //获取ID
    this.countdownMusic.pause();
    this.gunWaittingMusic = document.getElementById("gunWaitting"); //获取ID
    this.gunWaittingMusic.pause();
    this.nightEndMusic = document.getElementById("nightEnd"); //获取ID
    this.nightEndMusic.pause();
    this.initWebsocket();
  },
  watch: {
    manRoleImg: function(val) {
      if (val !=null) {
        setTimeout(() => {
          this.manRoleImg = null;
        }, 2000);
      }
    },
    clock: function(val) {
      if (val > 0) {
        setTimeout(() => {
          this.clock = val - 1;
        }, 1000);
      }
      if (val == 5) {
        if (this.creator) {
          this.countdownMusic.currentTime = 0;
          this.countdownMusic.play();
        }
      }
      if (val == 0) {
        if (this.creator) {
          this.countdownMusic.pause();
        }
        setTimeout(() => {
          this.processStap++;
        }, 500);
      }
    },
    processStap: function(val) {
      switch (val) {
        case -1:
          // this.$Message.info(`天黑了`);
          this.manRoleImg = nightMan;
          if (this.creator) {
            // this.nightMusic.play();
            this.nightCloseMusic.play();
          }
          this.clock = 3;
          break;
        case 0:
          // this.$Message.info(`狼人行动`);
          this.manRoleImg = wolfMan;
          if (this.creator) {
            this.wolfsActionMusic.play();
          }
          this.clock = this.wolfsTime;
          break;
        case 1:
          // this.$Message.info(`waiting`);
          if (this.creator) {
            this.send(`wolf-killEnd---${localStorage.hostId}`);
            this.wolfsEndMusic.play();
          }
          this.clock = 3;
          break;
        case 2:
          // this.$Message.info(`女巫行动`);
          this.manRoleImg = witchMan;
          if (this.creator) {
            this.witchActionMusic.play();
          }
          if (this.self == 2) {
            this.send(`witch-die---${localStorage.hostId}`);
          }
          this.clock = this.witchTime;
          break;
        case 3:
          // this.$Message.info(`waiting`);
          if (this.creator) {
            this.witchEndMusic.play();
          }
          this.clock = 3;
          break;
        case 4:
          // this.$Message.info(`预言家行动`);
          this.manRoleImg = checkMan;
          if (this.creator) {
            this.checkActionMusic.play();
          }
          this.clock = this.checkTime;
          break;
        case 5:
          // this.$Message.info(`waiting`);
          if (this.creator) {
            this.checkEndMusic.play();
          }
          this.clock = 3;
          break;
        case 6:
          // this.$Message.info(`竞选警长`);
          this.manRoleImg = policeMan;
          if (this.creator) {
            this.chosePoliceMusic.play();
          }
          this.clock = 8;
          break;
        case 7:
          // this.$Message.info(`天亮了`);
          this.manRoleImg = lightMan;
          this.nightEnd = true;
          this.killMap = [];
          this.processStap = -2;
          this.saveAndPoisonState[2] = 1;
          this.wolfConfirm = false;
          this.witchConfirm = false;
          this.checkConfirm = false;
          this.diedMan = null;
          this.send(`hunter-gun---`);
          if (this.creator) {
            this.nightEndMusic.play();
            this.nightMusic.pause();
          }
          break;
        default:
          break;
      }
    },
    players: function(val) {
      this.nullSeat = 0;
      val.forEach(el => {
        if (el == null) {
          this.nullSeat = 1;
        }
      });
    }
  },
  methods: {
    initWebsocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    start() {
      //开启心跳
      this.timeoutObj && clearInterval(this.timeoutObj);
      this.timeoutObj = setInterval(() => {
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if (this.socket.readyState == 1) {
          //如果连接正常
          this.socket.send("hello server");
          this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
        } else {
          //否则重连
          this.reconnect();
        }
        this.serverTimeoutObj = setTimeout(() => {
          //超时关闭
          this.socket.close();
        }, this.timeout);
      }, this.timeout);
    },
    reconnect() {
      //重新连接
      if (this.lockReconnect) {
        return;
      }
      this.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      this.timeoutnum && clearTimeout(this.timeoutnum);
      this.timeoutnum = setTimeout(() => {
        //新连接
        this.initWebSocket();
        this.lockReconnect = false;
      }, 5000);
    },
    open: function() {
      console.log("socket连接成功");
      this.start();
      this.send(`man-link-${localStorage.name}--${localStorage.hostId}`);
    },
    error: function() {
      console.log("连接错误");
    },
    getMessage: function(msg) {
      console.log(msg.data);
      let data = msg.data.split("-");
      switch (data[0]) {
        case "link":
          //link-{}-name-num
          let seatInfo = JSON.parse(data[1]);
          let name = data[2];
          let iconId = parseInt(data[3]);
          Object.keys(seatInfo).forEach(key => {
            this.$set(this.players, parseInt(key) - 1, seatInfo[key]);
          });
          let mark = 0;
          for (let i = 0; i < this.iconIndexList.length; i++) {
            if (this.iconIndexList[i] == iconId) {
              this.nameIndexList[i] = name;
              mark = 1;
            }
          }
          if (mark == 0) {
            this.iconIndexList.push(iconId);
            this.nameIndexList.push(name);
          }
          console.log(this.iconIndexList, this.nameIndexList);
          break;
        case "seat":
          //seat-name-seatId
          if (data[1] == "fail") {
            this.$Message.info(`这个座位有人了`);
          } else {
            if (this.user == data[1]) {
              this.seat = parseInt(data[2]);
            }
            let index = this.players.indexOf(data[1]);
            if (index != -1) {
              this.$set(this.players, index, null);
            }
            this.$set(this.players, parseInt(data[2]) - 1, data[1]);
            console.log(this.players);
          }
          break;
        case "stand":
          //stand-seatId-
          this.$set(this.players, parseInt(data[1]) - 1, null);
          break;
        case "card":
          //card-*-
          let cardId = parseInt(data[1]);
          if (cardId == 2) {
            this.saveAndPoisonState = [1, 1, 1];
          }
          if (cardId < 20 && cardId > 10) {
            cardId = 10;
          }
          if (cardId > 30) {
            cardId = 30;
          }
          this.self = cardId;
          break;
        case "begin":
          //begin--
          // this.self = parseInt(data[1]);
          this.running = true;
          this.processStap = -1;
          break;
        case "kill":
          //kill-from-to
          if (this.self == 21 || this.self == 22 || this.self == 30) {
            let mark = 0;
            this.killMap.forEach(el => {
              if (el[0] == data[1]) {
                el[1] = data[2];
                mark = 1;
              }
            });
            if (mark == 0) {
              let arr = [data[1], data[2]];
              this.killMap.push(arr);
            }
          }
          console.log(this.killMap);
          break;
        case "killEnd":
          //killEnd-seatId-
          if (this.self == 21 || this.self == 22 || this.self == 30) {
            if (data[1] != "") {
              this.$Message.info(`你们杀死了“${data[1]}号”`);
              this.diedMan = parseInt(data[1]);
            } else {
              this.$Message.info(`你们空刀了`);
              this.diedMan = null;
            }
          }
          break;
        case "save":
          //save-seatId-
          if (data[1] != "") {
            this.$Message.info(`你救了“${data[1]}号”`);
            this.$Message.info(`你没有使用毒药`);
          } else {
            this.$Message.info(`你没有使用解药`);
            this.$Message.info(`你没有使用毒药`);
          }
          break;
        case "die":
          //die-seatId-
          if (data[1] != "" && this.saveAndPoisonState[0] == 1) {
            this.diedMan = parseInt(data[1]);
          } else {
            this.diedMan = null;
          }
          break;
        case "poison":
          //poison-seatId-
          if (data[1] != "") {
            this.$Message.info(`你毒了“${data[1]}号”`);
            this.$Message.info(`你没有使用解药`);
          } else {
            this.$Message.info(`你没有使用解药`);
            this.$Message.info(`你没有使用毒药`);
          }
          break;
        case "check":
          //check-seatId-cardId
          if (data[2] != "") {
            let cardId = parseInt(data[2]);
            if (cardId < 20 && cardId > 10) {
              cardId = 10;
            }
            if (cardId > 20) {
              cardId = 30;
            }
            let personStr;
            if (cardId == 21 || cardId == 22 || cardId == 30) {
              personStr = "坏人";
            } else {
              personStr = "好人";
            }
            localStorage.nightMsg = `“${data[1]}号”是${personStr}`;
            this.$Message.info(`“${data[1]}号”是${personStr}`);
          } else {
            this.$Message.info(`你没有验证玩家身份`);
          }
          break;
        case "night":
          //night-1,2-diedBywitch
          let diedPerson = data[1].split(",");
          if (data[2] != "" && data[2].length > 0) {
            this.diedBywitch = parseInt(data[2]);
          }
          let len = diedPerson.length;
          let str = "";
          for (let i = 0; i < len; i++) {
            str += `${diedPerson[i]}号`;
            if (i != len - 1) {
              str += "、";
            }
          }
          if (diedPerson.length > 0 && diedPerson[0] != "") {
            diedPerson.forEach(el => {
              this.diedMen.push(parseInt(el));
            });
            if (!localStorage.nightMsg) {
              this.nightMsg = `昨夜“${str}”死了。`;
            } else {
              this.nightMsg += `${localStorage.nightMsg}。昨夜“${str}”死了。`;
            }
          } else {
            if (!localStorage.nightMsg) {
              this.nightMsg = `昨夜是平安夜。`;
            } else {
              this.nightMsg += `${localStorage.nightMsg}。昨夜是平安夜。`;
            }
          }
          if (this.diedBywitch == this.seat && this.self == 3) {
            this.nightMsg += `你不能开枪。`;
          } else if (this.self == 3) {
            this.nightMsg += `你可以开枪。`;
          }
          if (this.creator) {
            this.msg = this.nightMsg;
            this.view = true;
          }
          break;
        default:
          break;
      }
    },
    send: function(params) {
      console.log(params);
      this.socket.send(params);
    },
    close: function() {
      console.log("socket已经关闭");
    },
    // testSocket() {
    //   this.send("testSocket");
    // },
    getCard() {
      this.send(`admin-card---${localStorage.hostId}`);
      // this.self = 1;
    },
    begin() {
      this.nightEnd = false;
      this.nightMsg = "";
      this.send(`admin-begin---${localStorage.hostId}`);
    },
    stand() {
      this.send(`man-stand-${this.seat}--${localStorage.hostId}`);
      this.seat = -1;
    },
    back() {
      this.$router.push("/choose");
    },
    choose(target, index) {
      if (this.diedMen.indexOf(index + 1) == -1) {
        if (this.running) {
          if (
            this.processStap == 0 &&
            (this.self == 21 || this.self == 22 || this.self == 30)
          ) {
            let lastChoose = this.choiseUser;
            if (lastChoose == index + 1) {
              this.choiseUser = "";
            } else {
              this.choiseUser = index + 1;
            }
          }
          if (this.processStap == 2 && this.self == 2) {
            let lastChoose = this.choiseUser;
            if (lastChoose == index + 1) {
              this.choiseUser = "";
            } else {
              this.choiseUser = index + 1;
            }
          }
          if (this.processStap == 4 && this.self == 1) {
            let lastChoose = this.choiseUser;
            if (lastChoose == index + 1) {
              this.choiseUser = "";
            } else {
              this.choiseUser = index + 1;
            }
          }
        } else {
          if (this.seat == -1 || this.seat != index + 1) {
            this.send(
              `man-seat-${localStorage.name}-${index + 1}-${
                localStorage.hostId
              }`
            );
          }
        }
      }
      if (
        this.processStap == 0 &&
        (this.self == 21 || this.self == 22 || this.self == 30)
      ) {
        let mark = 0;
        this.killMap.forEach(el => {
          if (el[0] == this.seat) {
            if (el[1] == index + 1) {
              this.killMap.splice(
                this.killMap.findIndex(item => item[0] === this.seat),
                1
              );
              console.log(this.killMap);
              mark = 1;
            } else {
              el[1] = index + 1;
              mark = 1;
            }
          }
        });
        if (mark == 0) {
          let arr = [this.seat, index + 1];
          this.killMap.push(arr);
          console.log(this.killMap);
        }
      }
    },
    check() {
      if (this.choiseUser == "") {
        alert("选中玩家发动技能");
      } else {
        this.send(`prophet-check-${this.choiseUser}--${localStorage.hostId}`);
        this.checkConfirm = true;
        this.$Message.info(`你验证了${this.choiseUser}号`);
      }
    },
    kill() {
      if (this.choiseUser == "") {
        alert("选中玩家发动技能");
      } else {
        this.send(
          `wolf-kill-${this.seat}-${this.choiseUser}-${localStorage.hostId}`
        );
        this.wolfConfirm = true;
        this.$Message.info(`你杀了${this.choiseUser}号`);
      }
    },
    save() {
      if (this.choiseUser == "") {
        alert("选中玩家发动技能");
      } else if (this.saveAndPoisonState[0] == 1) {
        this.saveAndPoisonState[2] = 0;
        this.saveAndPoisonState[0] = 0;
        this.send(`witch-save-${this.choiseUser}--${localStorage.hostId}`);
        this.witchConfirm = true;
        this.$Message.info(`你救了${this.choiseUser}号`);
      }
    },
    poison() {
      if (this.choiseUser == "") {
        alert("选中玩家发动技能");
      } else if (this.saveAndPoisonState[1] == 1) {
        this.saveAndPoisonState[2] = 0;
        this.saveAndPoisonState[1] = 0;
        this.send(`witch-poison-${this.choiseUser}--${localStorage.hostId}`);
        this.witchConfirm = true;
        this.$Message.info(`你毒了${this.choiseUser}号`);
      }
    },
    guard() {
      if (this.choiseUser == "") {
        alert("选中玩家发动技能");
      } else {
        this.send("guard");
      }
    },
    gun() {
      if (this.choiseUser == "") {
        alert("选中玩家发动技能");
      } else {
        this.send(`hunter-gun-${this.choiseUser}--${localStorage.hostId}`);
      }
    },
    unSkill() {
      this.choiseUser = "";
    },
    ok() {
      this.msg = "";
      this.view = false;
    },
    cancel() {
      this.msg = "";
      this.view = false;
    },
    viewMsg(mode) {
      if (mode == 0 && this.nightMsg == "") {
        this.send(`admin-night---${localStorage.hostId}`);
      }
      if (this.nightMsg != "") {
        this.msg = this.nightMsg;
        this.view = true;
      }
    },
    selfShow() {
      let selfRole = "";
      switch (this.self) {
        case 1:
          selfRole = "预言家";
          break;
        case 2:
          selfRole = "女巫";
          break;
        case 3:
          selfRole = "猎人";
          break;
        case 4:
          selfRole = "白痴";
          break;
        case 5:
          selfRole = "守卫";
          break;
        case 21:
          selfRole = "白狼王";
          break;
        case 22:
          selfRole = "狼王";
          break;
        case 10:
          selfRole = "村民";
          break;
        case 30:
          selfRole = "狼人";
          break;
        default:
          break;
      }
      this.msg = `你是“${selfRole}”`;
      this.view = true;
    },
    useSkill() {
      let tip = "";
      switch (this.self) {
        case 1:
          tip = "你可以验人。选中玩家，点击确定发动技能";
          break;
        case 2:
          tip = "你可以使用药水。选中玩家，点击确定发动技能";
          break;
        case 3:
          tip = "你非毒杀可以带走任何人。选中玩家，点击确定发动技能";
          break;
        case 4:
          tip = "你可以避免票决。选中玩家，点击确定发动技能";
          break;
        case 5:
          tip = "你可以守卫一个爱的人。选中玩家，点击确定发动技能";
          break;
        case 21:
          tip = "你可以杀人，自爆带走任何人。选中玩家，点击确定发动技能";
          break;
        case 22:
          tip = "你可以杀人，自爆，验神民。选中玩家，点击确定发动技能";
          break;
        case 10:
          tip = "你可以投票。选中玩家，点击确定发动技能";
          break;
        case 30:
          tip = "你可以杀人。选中玩家，点击确定发动技能";
          break;
        default:
          break;
      }
      this.msg = tip;
      this.view = true;
    }
  },
  beforeDestroy() {
    if (this.timeoutObj) clearInterval(this.timeoutObj);
    if (this.serverTimeoutObj) clearTimeout(this.serverTimeoutObj);
    this.nightMusic.pause();
    this.socket.close();
  }
};
</script>
<style scoped>
.index {
  position: relative;
  overflow: hidden;
}
.bgIndex {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.processImg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  opacity: 1;
  transform: translate(-50%, -50%);
  height: 100%;
	animation:processImgAnimate 2s linear;
}
@keyframes processImgAnimate {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.clock {
  height: 50px;
  line-height: 54px;
  color: red;
  font-size: 24px;
  border-radius: 5px;
  width: 50px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 20px;
  left: 15px;
  z-index: 999;
}
.seat-item-die {
  background: rgba(0, 0, 0, 0.2);
  color: red;
  font-size: 24px;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.seat-item {
  width: 30%;
  height: 0;
  padding-bottom: 30%;
}
.seat-item img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
}
.killMsg {
  height: 24px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.killMsg > div {
  height: 24px;
  line-height: 24px;
  width: 24px;
  border-radius: 12px;
  background: red;
  color: white;
  float: left;
}
.skills {
}
.lastNight {
  position: absolute;
  bottom: 10px;
  left: calc(50% - 44px);
}
.skill {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.5);
}
.bottomBtn {
  position: absolute;
  bottom: 10px;
  left: calc(50% - 30px);
}
.self {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.5);
}
@media screen and (max-height: 585px) {
  .centerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 95vh;
    width: 95%;
    max-width: 680px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    padding: 10px 20px;
    overflow: hidden;
  }

  .ivu-alert {
    margin-bottom: 2px !important;
  }

  .seat {
    height: calc(100% - 100px);
    width: 100%;
    margin-top: 32px;
    overflow-y: scroll;
  }
  .seat-item {
    /* height: 50px;
  width: 50%; */
    background: rgba(255, 255, 255, 0.8);
    float: left;
    margin: 2px 1.6%;
    position: relative;
  }
}
@media screen and (max-height: 812px) and (min-height: 586px) {
  .centerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 95vh;
    width: 95%;
    max-width: 680px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    padding: 20px;
    overflow: hidden;
  }
  .seat {
    height: calc(100% - 100px);
    width: 100%;
    margin-top: 50px;
    overflow-y: scroll;
  }
  .seat-item {
    /* height: 50px;
  width: 50%; */
    background: rgba(255, 255, 255, 0.8);
    float: left;
    margin: 1.5%;
    position: relative;
  }
}
</style>